<script>
import UniPopup from "../../../../../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue"
import { showModal } from "@/utils"
import vocabularyDetail from "../../../../../../components/vocabularyDetail.vue"
import title from "../../title.vue"
import collection from "../../collection.vue"
import common from "../../common"
import analysisVideo from "../../analysisVideo.vue"
import answerSheet from "./answerSheet.vue"
import analysis from "./analysis.vue"
import controlBar from "../controlBar.vue"

export default {
  name: "KYTranslate",
  components: {
    collection,
    UniPopup,
    vocabularyDetail,
    title,
    analysisVideo,
    answerSheet,
    analysis,
    controlBar,
  },
  data() {
    return {
      textList: [], //文章段落内容
      questionList: [], //答题卡问题列表
      details: null, //题目详情
      currentQuestionIndex: 0, //当前题目索引
      common,
    }
  },
  props: {
    viewAnalysis: Boolean,
  },
	watch: {
		viewAnalysis() {
			// 重置题目索引
			this.currentQuestionIndex = 0
		}
	},
  methods: {
    setDetails(details) {
      //初始化数据
      this.details = details
      this.textList = details.kyTranslate.textList
      //提取段落里面的问题
      this.questionList = []
      for (let i = 0; i < this.textList.length; i++) {
        this.textList[i].questionList = []
        for (let j = 0; j < this.textList[i].contentList.length; j++) {
          if (this.textList[i].contentList[j].contentType === "TOPIC") {
            this.questionList.push(this.textList[i].contentList[j])
            //供查看解析模式使用
            if (this.viewAnalysis) this.textList[i].questionList.push(this.textList[i].contentList[j])
          }
        }
      }
    },
    //打开答题卡
    openAnswerSheet(questionItem) {
      if (questionItem) {
        // 通过题目内容找到题目索引
        for (let i = 0; i < this.questionList.length; i++) {
          const item = this.questionList[i]
          if (item.content === questionItem.content) {
            this.currentQuestionIndex = i
            break
          }
        }
      }
      this.$refs["answer-sheet"].open()
    },
    //提交作答
    async submit() {
			const questionList = this.$refs["answer-sheet"].handleSubmit()
      //是否还有未做的题目
      let unAnswer = false
      for (let i = 0; i < questionList.length; i++) {
        //处理待提交的数据
        questionList[i].questionSerialNum = questionList[i].serialNum
        questionList[i] = {
          ...questionList[i].topic,
          ...questionList[i],
        }
        //检查是否有未作答的题目
        if (!questionList[i].userAnswer && !questionList[i].userAnswerImage) {
          unAnswer = true
        }
      }
      if (unAnswer) {
        if (
          !(await showModal({
            title: "提示",
            content: "还有题目未作答，是否确认提交？",
            confirmText: "确认提交",
            cancelText: "继续作答",
          }))
        ) {
          //打开答题卡
          this.$refs["answer-sheet"].open()
					this.$refs["answer-sheet"].openAnswerRecord()
          return
        }
      }
      //提交答案
      this.$emit("submit", {
        questionList: questionList,
        //暂时无法评分，先写死分数为0
        userDoTopicScore: {
          totalTopicNum: 1,
          rightTopicNum: 0,
          errorTopicNum: 0,
          noDoNum: 0,
          score: 0,
          isCalculateScore: 0, //暂不评分
        },
      })
    },
  },
  inject: ["root"],
  provide() {
    return {
      parent: this,
    }
  },
  emits: ["getDetails", "submit"],
}
</script>

<template>
  <view class="component">
    <!--		题目名称-->
    <title :topic-name="details.topicName"></title>
    <view class="tips">提示：你可以点击段落中的题号以弹出答题卡进行作答</view>
    <!--		题干-->
    <view class="topic-paragraph-item" v-if="details.topicStem">
      <view v-html="details.topicStem"></view>
    </view>
    <!--		文章段落内容-->
    <view class="text-list">
      <block v-for="paragraph in textList" :key="paragraph.id">
        <view class="paragraph-item">
          <!--				段落开头缩进-->
          <text class="text" style="width: 56rpx"></text>
          <block v-for="item in paragraph.contentList" :key="item.index">
            <!--						画线-->
            <!--					文本类型-->
            <text
              class="text"
              :class="{ underline: item.underline === 'TEXT_UNDERLINE' }"
              v-if="item.contentType === 'TEXT'"
              @click="$refs.vocabularyDetail.open(item.content)"
              >{{ item.content }}</text
            >
            <!--					问题类型-->
            <text
              :class="[
                item.underline === 'TEXT_UNDERLINE' ? 'underline' : '',
                item.userAnswer || item.userAnswerImage ? 'hasDo' : 'hasNotDo',
              ]"
              class="topic"
              v-else-if="item.contentType === 'TOPIC'"
              @click="() => openAnswerSheet(item)"
              >{{ item.content }}
            </text>
            <!--					重点词汇-->
            <text
              class="vocabulary"
              :class="{ underline: item.underline === 'TEXT_UNDERLINE' }"
              @click="$refs.vocabularyDetail.open(item.content)"
              v-else-if="item.contentType === 'MAIN_VOCABULARY'"
              >{{ item.content }}</text
            >
          </block>
        </view>
        <!--				段落翻译-->
        <view class="paragraph-translate" v-if="viewAnalysis && paragraph.trans">{{ paragraph.trans }}</view>
        <!--				段落中包含的问题-->
        <view v-if="viewAnalysis" class="question-list">
          <view class="question-item" v-for="item in paragraph.questionList" :key="item.questionId">
            <view style="font-weight: bold">
              <text>{{ item.topic.serialNum }}</text>
              <text>.\t</text>
              <text>{{ item.topic.content }}</text>
              <text v-if="!item.topic.userAnswer || !item.topic.userAnswer" style="color: darkred">\t[未作答]</text>
            </view>
            <analysis :question-item="item" @getDetails="() => $emit('getDetails')"></analysis>
          </view>
        </view>
      </block>
    </view>
    <!--		底部控制按钮-->
    <view class="placeholder"></view>
    <control-bar :view-analysis="viewAnalysis" @submit="submit" @openAnswerSheet="openAnswerSheet"></control-bar>
    <!--		答题卡弹框-->
    <view class="popup-placeholder"></view>
    <answerSheet
      :view-analysis="viewAnalysis"
      ref="answer-sheet"
      :questionListProp="questionList"
      :current-question-index.sync="currentQuestionIndex"
      @submit="submit"
      @getDetails="() => $emit('getDetails')"
    ></answerSheet>
    <vocabularyDetail ref="vocabularyDetail"></vocabularyDetail>
  </view>
</template>

<style scoped lang="scss">
.component {
  padding: 30rpx;
  > .tips {
    font-size: calc(30rpx * var(--font-size-rate));
    color: var(--text-color-light);
    margin-top: 30rpx;
  }
  .topic-paragraph-item {
    font-size: calc(32rpx * var(--font-size-rate));
    line-height: 2;
    margin-top: 20rpx;
  }
  .text-list {
    padding: 30rpx 0;
    .paragraph-item {
      &:not(:first-child) {
        margin-top: 40rpx;
      }
      display: flex;
      flex-wrap: wrap;
      font-size: calc(34rpx * var(--font-size-rate));
      line-height: 2;
      .underline {
        text-decoration: underline;
      }
      .topic {
        display: inline-block;
        padding: 0 14rpx;
        &.hasNotDo {
          background: var(--subtheme-color);
        }
        &.hasDo {
          background: #bad3e7;
        }
      }
      .vocabulary {
        color: var(--text-color-theme);
      }
      .text {
        display: inline-block;
        //识别空格
        white-space: pre-wrap;
      }
    }
    .paragraph-translate {
      margin-top: 10rpx;
      font-size: calc(32rpx * var(--font-size-rate));
      //color: var(--text-color-light);
      background: var(--theme-color-light);
      line-height: 2;
      padding: 0 20rpx;
      border: 4rpx solid var(--border-color);
      border-radius: 16rpx;
    }
    .question-list {
      margin-top: 40rpx;
      .question-item {
        margin-top: 40rpx;
        font-size: calc(30rpx * var(--font-size-rate));
        line-height: 1.7;
        &:not(:last-child) {
          border-bottom: 2rpx solid var(--border-color);
        }
      }
    }
  }
  > .placeholder {
    height: calc(150rpx + env(safe-area-inset-bottom));
  }
  .popup-placeholder {
    height: 550rpx;
  }
}
</style>
